<template>
<!--综合查询页面 任务查询-->
<div class="regist">
    <!-- 查询条件 -->
    <div class="query">
        <el-row :gutter="10" class="mgt-10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">保单号 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.policyNo" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">案件号 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.registNo" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">环节 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.insuredIdentifyNumber" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">案件来源 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-select v-model="searchConditions.caseSource" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in huanjie" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">案件状态 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-select v-model="searchConditions.caseFlag" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in caseStatuss" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">承保机构 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.compensateNo" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">险种分类 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.insuredName" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">出险原因 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.appliName" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">联系电话 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.appliIdentifyNumber" placeholder="请输入内容"></el-input>
                </div>
            </el-col>

        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">联系邮箱 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">渠道编码 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">被保险人 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">报案人 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">客户类型 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">标注类型 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">处理人 :</div>
            </el-col>
            <el-col :span="6" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-input v-model="searchConditions.comCode" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">发起时间 :</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker v-model="searchConditions.registTimeS" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 98%;">
                </el-date-picker>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">结案时间 :</div>
            </el-col>
            <el-col :span="6">
                <el-date-picker v-model="searchConditions.endCaseTimeS" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 98%;">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px">
            <el-col :offset="11" :span="2" style="padding-right: 10px;">
                <div class="grid-content bg-purple">
                    <el-button type="primary" plain @click="searchAdvancedCase">查询</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 查询结果列表 -->
    <div v-show="resultOpen" class="searchResult">
        <el-table ref="multipleTable" stripe :data="caseSummaryVos.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%;padding:20px;text-align:center" @selection-change="handleSelectionChange">
            <el-table-column prop="taskInTime" label="流入时间" width="180px" style="cursor:pointer"></el-table-column>
            <el-table-column prop="" label="流入天数"></el-table-column>
            <el-table-column prop="registNo" label="报案号" width="180px" style="cursor:pointer"></el-table-column>
            <el-table-column prop="insuredName" label="被保险人"></el-table-column>
            <el-table-column prop="" label="归属环节"></el-table-column>
            <el-table-column prop="caseStatuss" label="案件状态"></el-table-column>
            <el-table-column prop="workStatus" label="任务状态"></el-table-column>
            <el-table-column prop="handlerUser" label="当前处理人"></el-table-column>
            <el-table-column prop="riskCode" label="险种分类"></el-table-column>
            <el-table-column prop="riskCName" label="险种名称"></el-table-column>
            <el-table-column prop="comCodeName" label="承保机构"></el-table-column>
            <el-table-column prop="businessChannel" label="渠道编码"></el-table-column>
            <el-table-column prop="claimantApplyDate" label="申请时间"></el-table-column>
            <el-table-column prop="" label="客户类型"></el-table-column>
            <el-table-column prop="policyNo" label="保单号"></el-table-column>
            <el-table-column prop="" label="联系电话"></el-table-column>
            <el-table-column prop="" label="联系邮箱"></el-table-column>
            <el-table-column prop="" label="办理时长"></el-table-column>
            <el-table-column prop="" label="数据来源"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="goToCasePage(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">认领</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block mgt-10" width="180px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="caseSummaryVos.length"></el-pagination>
        </div>

    </div>
</div>
</template>

<script>
import {
    caseStatuss,
    caseFrom,
    huanjie,
} from "../../libs/data";
import {
    mapActions
} from "vuex";
export default {
    name: "mission-query",
    props: {},
    data: function () {
        return {
            searchConditions: {
                policyNo: "",
                registNo: "",
                claimNo: "",
                compensateNo: "",
                insuredName: "",
                insuredIdentifyNumber: "",
                appliName: "",
                appliIdentifyNumber: "",
                comCode: "",
                comCodeFlag: "1",
                caseFlag: "",
                caseSource: "",
                productCode: "",
                isPolicyNo: "",
                isClaimFlag: "0",
                isOutStanding: "0",
                damageDateS: "",
                damageDateE: "",
                claimTimeS: "",
                claimTimeE: "",
                underwriteDateS: "",
                underwriteDateE: "",
                endCaseTimeS: "",
                endCaseTimeE: "",
                registTimeS: "",
                registTimeE: "",
                payTimeS: "",
                payTimeE: "",
                dealTime: "",
            },
            caseStatuss: caseStatuss,
            caseFrom: caseFrom,
            huanjie: huanjie,
            resultOpen: false,
            currentPage: 1,
            pagesize: 5,
            caseSummaryVos: [],
        };
    },
    components: {
        caseStatuss,
        caseFrom,
        huanjie
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        ...mapActions("mission", ["queryMission"]),
        // 任务查询
        searchAdvancedCase() {
            this.searchConditions.validFlag = this.searchConditions.validFlag ? 1 : 0;
            this.queryMission(this.searchConditions).then((result) => {
                this.resultOpen = true;
                this.caseSummaryVos = result.data.data;
            });
        },
        // 点击查看，跳转到简易案件页面
        goToCasePage(row) {
            this.$router.push({
                name: "case",
                query: row,
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
};
</script>

<style lang="scss">
.regist {
    // padding: 30px !important;
    background: rgb(242, 242, 242);

    .query {
        padding: 10px;
        background: white;

        .el-row {
            line-height: 36px;
            margin-bottom: 5px;

            .startAndEnd {
                .el-date-editor.el-input {
                    width: 128px;
                }
            }
        }

        .el-col {
            position: relative;
        }
    }
}

.searchResult {
    margin-top: 10px;
    background: rgb(242, 242, 242);

    .el-table td,
    .el-table th.is-leaf {
        text-align: center;
        cursor: pointer;
    }
}
</style>
